<!DOCTYPE HTML>
<html>
<head>
	<title>pixi.js example 10 Text</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000000;
		}
	</style>

	<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
	<script>
    // Load them google fonts before starting...!
	WebFontConfig = {
	  google: {
	    families: [ 'Snippet', 'Arvo:700italic', 'Podkova:700' ]
	  },

	  active: function() {
	    // do something
	    init();
	  }
	};
	(function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();

	function runList(item)
	{
		console.log("_");
		var safe = 0;
		var tmp = item;
		while(tmp._iNext)
		{
			safe++;
			tmp = tmp._iNext;
			console.log(tmp);

			if(safe > 100)
			{
				console.log("BREAK");
				break;
			}
		}
	}

    function init()
    {
        var assetsToLoader = ["desyrel.xml"];

        // create a new loader
        var loader = new PIXI.AssetLoader(assetsToLoader);

        // use callback
        loader.onComplete = onAssetsLoaded;

        // create an new instance of a pixi stage
		var stage = new PIXI.Stage(0x66FF99);

		// begin load
        loader.load();

        function onAssetsLoaded()
        {
            var bitmapFontText = new PIXI.BitmapText("bitmap fonts are\n now supported!", { font: "35px Desyrel", align: "right" });
            bitmapFontText.position.x = 620 - bitmapFontText.textWidth - 20;
            bitmapFontText.position.y = 20;

			runList(bitmapFontText);

	        stage.addChild(bitmapFontText);
        }

		// add a shiny background...
		var background = PIXI.Sprite.fromImage("textDemoBG.jpg");
		stage.addChild(background);

		// create a renderer instance
		var renderer = PIXI.autoDetectRenderer(620, 400);
		// add the renderer view element to the DOM
		document.body.appendChild(renderer.view);

		// create some white text using the Snippet webfont
		var textSample = new PIXI.Text("Pixi.js can has\nmultiline text!", { font: "35px Snippet", fill: "white", align: "left" });
		textSample.position.x = 20;
		textSample.position.y = 20;

		// create a text object with a nice stroke
		var spinningText = new PIXI.Text("I'm fun!", { font: "bold 60px Arial", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 20 });

		// setting the anchor point to 0.5 will center align the text... great for spinning!
		spinningText.anchor.x = spinningText.anchor.y = 0.5;
		spinningText.position.x = 620 / 2;
		spinningText.position.y = 400 / 2;

		// create a text object that will be updated..
		var countingText = new PIXI.Text("COUNT 4EVAR: 0", { font: "bold italic 60px Arvo", fill: "#3e1707", align: "center", stroke: "#a4410e", strokeThickness: 7 });
		countingText.position.x = 620 / 2;
		countingText.position.y = 320;
		countingText.anchor.x = 0.5;

		stage.addChild(textSample);
		stage.addChild(spinningText);
		stage.addChild(countingText);

		var count = 0;
		var score = 0;
		var remaining = 10;


		function animate() {
			requestAnimFrame(animate);
			renderer.render(stage);

			count+=0.1;
			countingText.setText("COUNT 4EVAR: " + (count | 0));
		}

        requestAnimFrame(animate);
	}

	</script>

	</body>
</html>
